<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斯诺克计分板</title>
    <style>
        @media screen and (max-width:580px) {
            body {
                zoom: 0.6;
            }
        }

        .namearea {
            display: flex;
            justify-content: center;

        }

        .scorearea {
            display: flex;
            justify-content: center;

        }

        .redplayer {
            height: 60px;
            width: 200px;
            /* border: 1px solid black; */
            border: none;
            text-align: center;
            color: rgb(200, 0, 0);
            font-size: 30px;
            font-weight: bolder;
            margin-right: 70px;
        }

        .blueplayer {
            height: 60px;
            width: 200px;
            /* border: 1px solid black; */
            border: none;
            text-align: center;
            color: rgb(0, 60, 200);
            font-size: 30px;
            font-weight: bolder;
            margin-left: 70px;

        }

        .scorered1 {
            display: flex;
            height: 100px;
            width: 150px;
            margin: 5px;
            background-color: rgb(200, 0, 0);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            color: white;
            font-weight: bolder;

        }

        .scorered2 {
            display: flex;
            height: 50px;
            width: 50px;
            margin: 5px 30px 5px 30px;
            background-color: rgb(200, 0, 0);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;
        }

        .scorered2box {
            width: 110px;
        }

        .redbtnbox {
            display: flex;
            width: 110px;
            justify-content: center;
        }



        .scoreblue1 {
            display: flex;
            height: 100px;
            width: 150px;
            margin: 5px;
            background-color: rgb(0, 60, 200);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            color: white;
            font-weight: bolder;


        }

        .scoreblue2 {
            display: flex;
            height: 50px;
            width: 50px;
            margin: 5px 30px 5px 30px;
            background-color: rgb(0, 60, 200);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;


        }

        .scoreblue2box {
            width: 110px;
        }

        .bluebtnbox {
            display: flex;
            width: 110px;
            justify-content: center;
        }

        .redbtnplus1 {
            display: flex;
            height: 50px;
            width: 50px;
            margin: 5px;
            background-color: rgb(200, 0, 0);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;

        }

        .redbtnminus1 {
            display: flex;
            height: 50px;
            width: 50px;
            margin: 5px 30px 5px 5px;
            background-color: rgb(200, 0, 0);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;


        }


        .redbtnplus2 {
            display: flex;
            height: 40px;
            width: 40px;
            margin: 5px;
            background-color: rgb(200, 0, 0);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;

        }

        .redbtnminus2 {
            display: flex;
            height: 40px;
            width: 40px;
            margin: 5px;
            background-color: rgb(200, 0, 0);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;
        }

        .bluebtnplus1 {
            display: flex;
            height: 40px;
            width: 40px;
            margin: 5px;
            background-color: rgb(0, 60, 200);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;

        }

        .bluebtnminus1 {
            display: flex;
            height: 40px;
            width: 40px;
            margin: 5px;
            background-color: rgb(0, 60, 200);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;

        }


        .bluebtnplus2 {
            display: flex;
            height: 50px;
            width: 50px;
            margin: 5px 5px 5px 30px;
            background-color: rgb(0, 60, 200);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;

        }

        .bluebtnminus2 {
            display: flex;
            height: 50px;
            width: 50px;
            margin: 5px;
            background-color: rgb(0, 60, 200);
            border: none;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            font-size: 26px;
            color: white;
            font-weight: bolder;

        }

        .ballbox {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .red-ballarea {
            width: 160px;
            margin-right: 45px;

        }

        .blue-ballarea {
            width: 160px;
            margin-left: 45px;


        }

        .redball {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            /* background-color: red; */
            background: radial-gradient(circle at 20% 10%, white, red, black);
            margin: 5px;
            font-weight: bolder;
            color: #ffffff;
            font-size: 16px;
            /* border: none; */

        }

        .yellowball {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            /* background-color: rgb(255, 179, 0); */
            background: radial-gradient(circle at 20% 10%, white, rgb(235, 165, 0), black);
            color: black;
            font-weight: bolder;
            margin: 5px;
            font-size: 16px;
            /* border: none; */
        }

        .greenball {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            /* background-color: rgb(0, 130, 90); */
            background: radial-gradient(circle at 20% 10%, white, rgb(80, 230, 120), black);
            color: black;
            font-weight: bolder;
            margin: 5px;
            font-size: 16px;
            /* border: none; */

        }

        .brownball {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            /* background-color: rgb(165, 80, 40); */
            background: radial-gradient(circle at 20% 10%, white, rgb(225, 125, 70), black);
            color: black;
            font-weight: bolder;
            margin: 5px;
            font-size: 16px;
            /* border: none; */
        }

        .blueball {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            /* background-color: rgb(0, 125, 180); */
            background: radial-gradient(circle at 20% 10%, white, rgb(0, 180, 230), black);
            color: black;
            font-weight: bolder;
            margin: 5px;
            font-size: 16px;
            /* border: none; */

        }

        .pinkball {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            /* background-color: rgb(255, 100, 125); */
            background: radial-gradient(circle at 20% 10%, white, rgb(250, 110, 130), black);
            color: black;
            font-weight: bolder;
            margin: 5px;
            font-size: 16px;
            /* border: none; */

        }

        .blackball {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            background-color: black;
            background: radial-gradient(circle at 20% 10%, white, black, black);
            color: white;
            font-weight: bolder;
            margin: 5px;
            font-size: 16px;
            /* border: none; */

        }

        .vs {
            display: flex;
            font-size: 60px;
            font-weight: bolder;
            text-align: center;
            align-items: center;
            margin: 5px;

        }

        .clsarea {
            width: 160;

        }

        .cls {
            display: block;
            height: 43px;
            width: 150px;
            border: none;
            border-radius: 10px;
            font-size: 20px;
            color: rgba(255, 255, 255);
            background-color: rgb(0, 160, 80);
            margin: 5px;
        }

        button:active {
            transform: translateY(2px);
        }
    </style>
</head>

<body>
    <div class="namearea">
        <input type="text" placeholder="红方" value="红方" class="redplayer">
        <input type="text" placeholder="蓝方" value="蓝方" class="blueplayer">
    </div>

    <div class="scorearea">

        <div class="scorered1" id="redscore1">0</div>

        <div class="scorered2box">
            <div class="scorered2" id="redscore2">0</div>
            <div class="redbtnbox">
                <button class="redbtnplus2" onclick="Plusttred2()">▲</button>
                <button class="redbtnminus2" onclick="Minusred2()">▼</button>
            </div>
        </div>

        <span class="vs">:</span>

        <div class="scoreblue2box">
            <div class="scoreblue2" id="bluescore1">0</div>
            <div class="bluebtnbox">
                <button class="bluebtnplus1" onclick="Plusttblue2()">▲</button>
                <button class="bluebtnminus1" onclick="Minusblue2()">▼</button>
            </div>
        </div>

        <div class="scoreblue1" id="bluescore2">0</div>

    </div>

    <div class="ballbox">
        <div class="red-ballarea">
            <button class="redball" onclick="Plusred1()">▲</button>
            <button class="redball" onclick="Minusred1()">▼</button>
            <button class="redball" onclick="Plusred1()">+1</button>
            <button class="yellowball" onclick="Plusred2()">+2</button>
            <button class="greenball" onclick="Plusred3()">+3</button>
            <button class="brownball" onclick="Plusred4()">+4</button>
            <button class="blueball" onclick="Plusred5()">+5</button>
            <button class="pinkball" onclick="Plusred6()">+6</button>
            <button class="blackball" onclick="Plusred7()">+7</button>

        </div>

        <div class="clsarea">
            <button class="cls" onclick="Clsts()">单局清零</button>
            <button class="cls" onclick="Clstt()">大比分清零</button>
            <button class="cls" onclick="Clsall()">全部清零</button>
        </div>

        <div class="blue-ballarea">
            <button class="redball" onclick="Plusblue1()">▲</button>
            <button class="redball" onclick="Minusblue1()">▼</button>
            <button class="redball" onclick="Plusblue1()">+1</button>
            <button class="yellowball" onclick="Plusblue2()">+2</button>
            <button class="greenball" onclick="Plusblue3()">+3</button>
            <button class="brownball" onclick="Plusblue4()">+4</button>
            <button class="blueball" onclick="Plusblue5()">+5</button>
            <button class="pinkball" onclick="Plusblue6()">+6</button>
            <button class="blackball" onclick="Plusblue7()">+7</button>
        </div>
    </div>

    <script>
        let redscore1 = 0;
        let redscore2 = 0;
        let bluescore1 = 0;
        let bluescore2 = 0;
        
        function Plusred1() {
            redscore1 = redscore1 + 1;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Plusred2() {
            redscore1 = redscore1 + 2;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Plusred3() {
            redscore1 = redscore1 + 3;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Plusred4() {
            redscore1 = redscore1 + 4;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Plusred5() {
            redscore1 = redscore1 + 5;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Plusred6() {
            redscore1 = redscore1 + 6;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Plusred7() {
            redscore1 = redscore1 + 7;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Minusred1() {
            redscore1 = redscore1 - 1;
            document.getElementById("redscore1").innerHTML = redscore1;
        }

        function Plusttred2() {
            redscore2 = redscore2 + 1;
            document.getElementById("redscore2").innerHTML = redscore2;
        }

        function Minusred2() {
            redscore2 = redscore2 - 1;
            document.getElementById("redscore2").innerHTML = redscore2;
        }

        function Plusttblue2() {
            bluescore1 = bluescore1 + 1;
            document.getElementById("bluescore1").innerHTML = bluescore1;
        }

        function Minusblue2() {
            bluescore1 = bluescore1 - 1;
            document.getElementById("bluescore1").innerHTML = bluescore1;
        }

        function Plusblue1() {
            bluescore2 = bluescore2 + 1;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Plusblue2() {
            bluescore2 = bluescore2 + 2;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Plusblue3() {
            bluescore2 = bluescore2 + 3;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Plusblue4() {
            bluescore2 = bluescore2 + 4;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Plusblue5() {
            bluescore2 = bluescore2 + 5;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Plusblue6() {
            bluescore2 = bluescore2 + 6;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Plusblue7() {
            bluescore2 = bluescore2 + 7;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }



        function Minusblue1() {
            bluescore2 = bluescore2 - 1;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Clsts() {
            redscore1 = 0;
            bluescore2 = 0;
            document.getElementById("redscore1").innerHTML = redscore1;
            document.getElementById("bluescore2").innerHTML = bluescore2;
        }

        function Clstt() {
            redscore2 = 0;
            bluescore1 = 0;
            document.getElementById("redscore2").innerHTML = redscore2;
            document.getElementById("bluescore1").innerHTML = bluescore1;
        }

        function Clsall() {
            redscore1 = 0;
            redscore2 = 0;
            bluescore1 = 0;
            bluescore2 = 0;
            document.getElementById("redscore1").innerHTML = redscore1;
            document.getElementById("bluescore2").innerHTML = bluescore2;
            document.getElementById("redscore2").innerHTML = redscore2;
            document.getElementById("bluescore1").innerHTML = bluescore1;

        }


    </script>
</body>

</html>